<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预约</title>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css" />
    <script src="/resources/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.datetimepicker.css"/>
    <script src="/resources/js/amazeui.datetimepicker.js"></script>
    <script src="/resources/jsutlis/DateFormat.js"></script>

    <style type="text/css">
        #eye{
            position: relative;
            top:-30px;
            right:10px;
            float: right;
        }
        #eye2{
            position: relative;
            top:-30px;
            right:10px;
            float: right;
        }
    </style>
</head>
<body>
<!-- 顶部 -->
<div style="background-color:#82a6f5;height:7%;">
    <a href="/c/centre" target="_parent">
        <button style="background-color:rgba(255,255,255,0);border-radius:25px;border-color:white;margin-top:7px;margin-left:12px;">
            <b style="color:white;"><</b>
        </button>
    </a>
</div>
<!-- 中间 -->
    <div id="center" style="width:100%;height:93%;" class="am-g">
       <div class="am-form" data-am-validator>

                <label>点击选择到日期：</label>
                <br>
                <input id="timePick" type="date" name="visitDate" />
                <br>
            <div class="am-input-group">
                <input type="text" value="${sessionScope.user.userTel}" name="phonenum" id="phonenum" placeholder="请输入电话号码" class="am-form-field" readonly>
                <span class="am-input-group-btn">
                  <button class="am-btn am-btn-default" type="button" onclick="getphonecheck(this)">点击获取验证码</button>
                </span>
            </div>
            <div class="am-form-group">
                <input type="text" class="tpl-form-input" id="phone_check" onblur="checkCode()" placeholder="请输入手机收到的验证码">
                <a id="checkcode" style="display:none;"></a>
            </div>
              <%--  <input id="phonenum" type="text" name="phone"/>
                <input type="button" class="am-btn am-btn-warning" value="点击获取验证码" onclick="getphonecheck(this)" ></input>--%>
                <a id="message" style="display:none;"></a>

            <p><button class="am-btn am-btn-primary" onclick="preAbout()">预约</button></p>
        </div>
    </div>
</body>






<script>
    $(function () {
        $('#timePick').val(formatDate(new Date(),'YY-MM-DD'));
        $('#timePick').attr("min",formatDate(new Date(),'YY-MM-DD'));
    });

    //对不起，没有查询到宝宝信息


    var checknum;//验证码接收
    var countdown=60;//验证码停留60秒
    //删除短信提示信息
    function remv() {
        var getphonecheck=document.getElementById("checkcode");
        getphonecheck.setAttribute("style","display:none");
    }
    //-------------------删除前端验证码-------------------------
    function remvchecknum() {
        checknum="";
        window.clearInterval(int);
    }
    // //----------------获取手机验证码-------------------
    function getphonecheck(obj) {
            phone = $("#phonenum").val();
            if (phone !=null && phone != undefined && phone !=''){
                //倒计时------------------------------
                if (countdown==59){
                    //手机号码验证 （1开头，第二位为[345789]之一，长度为11位）
                    if( !( /^1[345789]\d{9}$/.test(phone) ) ){
                        var message=document.getElementById("message");
                        message.innerHTML="您填写的手机号码有误，请检查重填！";
                        message.style.color="red";
                        message.style.display="block";
                        return false;
                    }
                    var formData=new FormData();
                    formData.append("userTel",phone);
                    $.ajax({
                        type: "POST",
                        cache: false,
                        url:"/r/message",
                        data:formData,
                        processData: false,
                        contentType: false
                    }).done(
                        function (res) {
                            if (res.emp==true){
                                var getphonecheck=document.getElementById("checkcode");
                                getphonecheck.innerHTML="短信已发送请注意查收";
                                getphonecheck.style.color="red";
                                getphonecheck.style.display="block";
                                remv=self.setInterval(remv() ,1000);//删除短信提示
                                checknum=res.message;
                                int=self.setInterval("remvchecknum()",60000);
                                //隐藏密码提示
                                var checkpwd=document.getElementById("checkpwd");
                                checkpwd.setAttribute("style","display:none");
                            }
                        }
                    ).error(function () {
                        alert("网络出了点小问题");
                    });
                }
                if (countdown == 0) {
                    obj.removeAttribute("disabled");
                    obj.innerHTML ="免费获取验证码";
                    countdown = 60;
                    return;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.innerHTML ="重新发送(" + countdown + ")";
                    countdown--;
                }
                setTimeout(function() {
                        getphonecheck(obj) }
                    ,1000)
            }else {
             if( !( /^1[345789]\d{9}$/.test(phone) ) ){
                    var message=document.getElementById("message");
                    message.innerHTML="您填写的手机号码有误，请检查重填！";
                    message.style.color="red";
                    message.style.display="block";
                    return false;
                }
            }
    }

function checkCode() {
    var code =$('#phone_check').val();
    if (code !=null && code != undefined && code!= ''){
        if (checknum == code) {
            var message=document.getElementById("message");
            message.innerHTML="验证通过";
            message.style.color="black";
            message.style.display="block";
            return true;
        }else {
            var message=document.getElementById("message");
            message.innerHTML="验证码不正确";
            message.style.color="red";
            message.style.display="block";
            return false;
        }
    }
}
   function preAbout(){
        if (checkCode()){
            phone = $("#phonenum").val();
            var date = $('#timePick').val();
            if (phone !=null && phone != undefined && phone !=''){
                if( !( /^1[345789]\d{9}$/.test(phone) ) ){
                    var message=document.getElementById("message");
                    message.innerHTML="您填写的手机号码有误，请检查重填！";
                    message.style.color="red";
                    message.style.display="block";
                    return false;
                }
                if (date == null || date == undefined || date == '') {
                    var message=document.getElementById("message");
                    message.innerHTML="请选择预约到店日期";
                    message.style.color="red";
                    message.style.display="block";
                    return false;
                }

                var formData=new FormData();
                formData.append("visitDate",date);
                $.ajax({
                    type: "POST",
                    cache: false,
                    url:"/pr/preabout",
                    data:formData,
                    processData: false,
                    contentType: false
                }).done(
                    function (res) {
                        if (res.success){
                            alert(res.msg);
                            window.location.href="/c/centre";
                            window.event.returnValue=false;
                        } else {
                            alert(res.msg);
                            return false;
                        }
                    }
                ).error(function () {
                    alert("网络出了点小问题");
                });
            }
        }else {
            console.log("---------------------");
            var message=document.getElementById("message");
            message.innerHTML="请输入验证码";
            message.style.color="red";
            message.style.display="block";
            return false;
        }
   }


</script>
</html>